<script setup>
import ItemCase from "@/components/ItemCase.vue";

defineProps({enter: Boolean})
const titles = ['品牌视觉识别设计', '数字化设计与用户体验设计', '内容与传播规划设计', '空间与展示设计']
</script>

<template>
  <view class="container">
    <view class="content row" v-if="enter">
      <view class="intro-card fadeIn d2s">
        <view class="font150 inter" style="color: #ffffff29;">02</view>
        <view class="column intro">
          <view class="font56">品牌策划设计</view>
          <view class="font28" style="color: #ffffff80;">Brand Planning and Design</view>
          <view class="row line">
            <view class="progress"/>
          </view>
          <view class="sub-title font24 top8">用视觉驱动品牌价值和财富的持续增长</view>
        </view>
        <ItemCase icon="icon_design" :titles="titles" width="25.5%" fw="90%" iw="32%"/>
      </view>
      <img class="image fadeIn d1s"
           src="https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_index_service2_pic.png" alt=""/>
    </view>
  </view>
</template>

<style scoped>
.container {
  height: calc(100vw * (1118 / 1920));

  .content {
    justify-content: right;

    .image {
      overflow: hidden;
      width: 75%;
      height: calc(100vw * (726 / 1920));
    }

    .intro-card {
      z-index: 1;
      padding: 4%;
      margin-top: 5%;
      margin-left: 5%;
      margin-right: -30%;
      height: calc(100vw * (710 / 1920));
      background: linear-gradient(45deg, #383D3E 0%, #191919 100%);

      .intro {
        margin-left: 7%;
        margin-top: -12%;

        .line {
          width: 30%;
          height: 2px;
          background-color: white;
          margin-top: 8%;

          .progress {
            width: 40%;
            height: 4px;
            background-color: #04c0df;
          }
        }
      }
    }
  }
}
</style>